<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 进度条</title>
</head>
<body>
<h1>进度条</h1>

<p>HTML</p>
<div class="container">
    <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="container">
    <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
    <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container">
    <div class="skills php">60%</div>
</div>
<style>
    .css{
        background-color: blue;
        width: 80%;
    }
    .js{
        background-color:red;
        width: 65%;
    }
    .php{
        background: #8a4419;
        width:60%;
    }
    *{
        box-sizing: border-box;
    }
    .container{
        width: 100%;
        background-color: grey;

    }
    .html{
        background-color: green;
        width: 90%;

    }
    .skills{
        padding: 30px;
        text-align: right;
        color: white;
    }

</style>
</body>
</html>